<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            background-color: #666666;
        }
        .main{
            background-color: #2f3234;
            width: 1000px;
            margin: 0 auto;
        }
        .left{
            background-color: blue;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div id="storage">
    <el-container>
        <el-header style="height: 100px">
        <div class="header">
            <el-row gutter="10">
                <el-col span="18" style="float: left">
                    <div><p>仓储管理系统</p></div>
                </el-col>
                <el-col v-for="user in userArr" span="6" style="float: right">
                    <div>
                        <p>当前用户：{{user.userName}}</p>
                        <p>部门：{{user.department}}</p>
                    </div>
                </el-col>
            </el-row>
        </div>
        </el-header>
        <el-container>
            <el-aside class="left" style="float:left; width:200px;">左侧</el-aside>
            <el-main class="main">主题</el-main>
        </el-container>
    </el-container>
</div>

</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<!--引入Axios-->
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script>
    let v = new Vue({
        el: '#storage',
        data: function () {
            return {
                userArr:[]
            }
        },
        methods: {

        },
        created:function () {
            axios.get("/v1/users/").then(function (response) {
                v.userArr = response.data.data;
            })
        }
    })
</script>

</html>